<template>
  <div>#####子组件#####</div>
  <div>-----更新时机-----</div>
  <button @click="change">按钮---{{ name }}</button>
  <!-- 函数 模板引用，好像只在挂载时能传入el -->
  <input type="text" :ref="(el) => refInput(el)" />
  <button @click="changeModel">改变Model</button>
  <div v-bind="$attrs">接收了{{ $attrs }}</div>
</template>
<script setup>
import {
  onBeforeMount,
  onBeforeUpdate,
  onMounted,
  reactive,
  ref,
  watch,
  useAttrs,
} from "vue";
const attrs = useAttrs();
console.log("&&&&", attrs, attrs.onClick());

let name = ref("wang");
function change() {
  name.value = "li";
  obj.a.c += 2;
  console.log("xxxxxx", obj);
}

const obj = reactive({
  a: {
    c: 123,
  },
});

function refInput(el) {
  if (el) console.log("ELELELELE", el);
}

const model = defineModel();
console.log("defineModel", model.value);

function changeModel() {
  model.value = {
    name: "sun",
    age: 11,
  };
}

watch(
  () => obj.a.c,
  (newValue) => {
    console.log("ZZZZZZ", newValue);
  }
);

onBeforeUpdate(() => {
  console.log("child---beforeUpdate");
});

onBeforeMount(() => {
  console.log("child---onBeforeMount");
});
onMounted(() => {
  console.log("child---onMounted");
});
defineExpose({
  name,
});
</script>
<style lang="scss" scoped>
.table {
  border: 1px solid #999;
  .ant-row {
    .ant-col:nth-child(odd) {
      background-color: #eee;
    }
    .ant-col {
      border: 1px solid #999;
      border-top: none;
      border-left: none;
      height: 48px;
      padding-left: 8px;
      line-height: 48px;
    }
  }
}
</style>
